<template>
  <div class="securityCenter">
    <div class="securityLevel front-color">
      <div class="securityLevel_star">
        <span class="level_text">{{$t('myAdd.securityCenter.securityLevel')}}</span>
        <star :fraction="countFraction"></star>
      </div>
      <div class="securityLevel_text">{{$t('myAdd.securityCenter.reminder')}}</div>
    </div>
    <div class="securityItem front-color">
      <div class="item clearfix">
        <div class="item_name">{{$t('myAdd.securityCenter.exPass')}}</div>
        <div class="item_cont">
          <div class="item_cont_center">
            <template v-if="userinfo && userinfo.ifSetExchangePwd">******</template>
            <template v-else>{{$t('myAdd.securityCenter.unSet')}}</template>
          </div>
          <div class="item_cont_right">
            <button @click="revisePassword('setExPassW')">{{isSetExPassW}}</button>
          </div>
        </div>
      </div>
      <div class="item clearfix">
        <div class="item_name">{{$t('myAdd.securityCenter.loginPass')}}</div>
        <div class="item_cont clearfix strength">
          <div class="progressDiv clearfix">
            <div class="progress" :class="{weak: strength === 'weak', medium: strength === 'medium', strong: strength === 'strong'}"></div>
            <div class="progress" :class="{medium: strength === 'medium', strong: strength === 'strong'}"></div>
            <div class="progress" :class="{strong: strength === 'strong'}"></div>
            <span class="textDes">{{textDes}}</span>
          </div>
          <button @click="revisePassword('loginPassW')" @mouseenter="showStrengthInfo" @mouseleave="hideStrengthInfo">{{$t('myAdd.securityCenter.toReset')}}</button>
          <div class="reset_text" v-show="strength === 'weak'">
            {{$t('myAdd.securityCenter.pleaseReset')}}
          </div>
          <div class="strength_info front-color" ref="strengthInfo">
            <p>{{$t('myAdd.securityCenter.strengthInfo1')}}</p>
            <p>{{$t('myAdd.securityCenter.strengthInfo2')}}</p>
            <p>{{$t('myAdd.securityCenter.strengthInfo3')}}</p>
          </div>
        </div>
      </div>
      <div class="item clearfix">
        <div class="item_name">{{$t('myAdd.securityCenter.bindMobelTitle')}}</div>
        <div class="item_cont">
          <div class="item_cont_center">
            <template v-if="userinfo.mobileNumber">{{userinfo.mobileNumber}}</template>
            <template v-if="userinfo.isOpenMobileCheck === 0" >
              <span v-if="userinfo.mobileNumber">{{$t('myAdd.securityCenter.notVerify')}}</span>
              <span v-else>{{$t('myAdd.securityCenter.notBind')}}</span>
            </template>
          </div>
          <div class="item_cont_right">
            <router-link :to="{path: '/personal/bindMobile'}">
              <template v-if="!userinfo.mobileNumber">
                <button>{{$t('myAdd.securityCenter.bind')}}</button>
              </template>
              <template v-else>
                <button class="cancel">{{$t('myAdd.securityCenter.edit')}}</button>
              </template>
            </router-link>
            <template v-if="userinfo.mobileNumber">
              <button v-if="userinfo.isOpenMobileCheck === 0" @click="openMobileVerify">{{$t('myAdd.securityCenter.openVerify')}}</button>
              <button v-else @click="closeMobileVerify">{{$t('myAdd.securityCenter.closeVerify')}}</button>
            </template>
          </div>
        </div>
      </div>
      <div class="item clearfix">
        <div class="item_name">{{$t('myAdd.securityCenter.bindEmailTitle')}}</div>
        <div class="item_cont">
          <div class="item_cont_center">
            <template v-if="userinfo.email">{{userinfo.email}}</template>
            <template v-else >{{$t('myAdd.securityCenter.notBind')}}</template>
          </div>
          <div class="item_cont_right">
            <template v-if="userinfo.email">
              <!-- 修改邮箱按钮 -->
              <button class="cancel" @click="bindEmail"> {{$t('myAdd.securityCenter.edit')}} </button>
            </template>
            <template v-else>
              <!-- 绑定邮箱按钮 -->
              <router-link tag="button" :to="{path: '/personal/bindEmail'}"> {{$t('myAdd.securityCenter.bind')}} </router-link>
            </template>
          </div>
        </div>
      </div>
      <div class="item item_google clearfix">
        <div class="item_name">{{$t('myAdd.securityCenter.googleVerityTitle')}}</div>
        <div class="item_cont">
          <div class="item_cont_center">
            <template v-if="userinfo.googleStatus === 1">{{$t('personal.inVerify')}}</template>
            <template v-else >{{$t('myAdd.securityCenter.notVerify')}}</template>
          </div>
          <div class="item_cont_right">
            <template v-if="userinfo.googleStatus === 1">
              <!-- 关闭谷歌验证按钮 -->
              <button @click="closeGoogleBind">{{$t('myAdd.securityCenter.closeVerify')}}</button>
            </template>
            <template v-else >
              <!-- 开启谷歌验证按钮 -->
              <router-link tag="button" :to="{path: '/personal/googlebind'}">{{$t('myAdd.securityCenter.openVerify')}}</router-link>
            </template>
          </div>
        </div>
      </div>
    </div>
    <!--  :flag='isVerifyDialog'  -->
    <el-dialog
      title=''
      :flag='isVerifyDialog'
      name= 'isVerifyDialog'
      :width='450'
      :dialogClose='closeDialog'>
      <div class="mobileverify-text" slot="content">{{$t('myAdd.securityCenter.text_4')}}</div>
      <div slot="options" class="footerBtn">
        <!-- this.userinfo.googleStatus === 0 && this.userinfo.isOpenMobileCheck === 0 -->
        <button class="cancel" @click="closeDialog">{{$t('myAdd.securityCenter.cancel')}}</button>
        <template v-if="userinfo.isOpenMobileCheck === 0">
          <button @click="openMobileVerify" v-if="userinfo.mobileNumber">{{$t('myAdd.securityCenter.openVerify')}}</button>
          <router-link tag="button"  v-else :to="{path: '/personal/bindMobile'}">
            {{$t('myAdd.securityCenter.bindMobelTitle')}}
          </router-link>
        </template>
        <router-link tag="button" :to="{path: '/personal/googlebind'}" v-if="userinfo.googleStatus === 0">
          {{$t('myAdd.securityCenter.googleVerityTitle')}}
        </router-link>
        <!-- <button>开启谷歌验证</button> -->
      </div>
    </el-dialog >
  </div>
</template>

<script>
import star from '@/components/addPage/common/star'
import { mapState } from 'vuex'
import elDialog from '@/components/common/addCommon/dialog'
export default {
  name: 'securityCenter',
  data () {
    return {
      fraction: 1,
      isVerifyDialog: false,
      strength: 'weak',
      ifSetExchangePwd: false
    }
  },
  components: { star, elDialog },
  mounted () {
    let loginPword = localStorage.getItem('loginPword')
    /*
    * 最短8位，最长16位 {8,16}
      必须包含1个数字
      必须包含2个小写字母
      必须包含2个大写字母
    * */
    let regxs = /^.*(?=.{8,16})(?=.*\d)(?=.*[A-Z]{2,})(?=.*[a-z]{2,}).*$/
    let bool = regxs.test(loginPword)
    if (loginPword.length > 8 && loginPword.length <= 12 && bool) {
      this.strength = 'medium'
    } else if (loginPword.length > 12 && bool) {
      this.strength = 'strong'
    }
    this.$store.dispatch('getCommonUser_info')
  },
  computed: {
    ...mapState({
      userinfo ({baseData: {_user}}) {
        if (_user) {
          this.ifSetExchangePwd = _user.ifSetExchangePwd
          return _user
        } else {
          return false
        }
      }
    }),
    countFraction () {
      this.fraction = 1
      this.strength === 'strong' && this.fraction ++
      this.userinfo.mobileNumber && this.fraction ++
      this.userinfo.email && this.fraction ++
      this.userinfo.googleStatus && this.fraction ++
      return this.fraction
    },
    Internationalization () {
      return {
        weak: this.$t('myAdd.securityCenter.weak'),
        medium: this.$t('myAdd.securityCenter.medium'),
        strong: this.$t('myAdd.securityCenter.strong')
      }
    },
    textDes () {
      let textDes = this.Internationalization.weak
      if (this.strength === 'medium') {
        textDes = this.Internationalization.medium
      } else if (this.strength === 'strong') {
        textDes = this.Internationalization.strong
      }
      return textDes
    },
    isSetExPassW () {
      return this.ifSetExchangePwd ? this.$t('myAdd.securityCenter.toReset') : this.$t('myAdd.securityCenter.toSet')
    }
  },
  methods: {
    // 关闭手机验证
    closeMobileVerify () {
      if (this.userinfo.googleStatus === 0) {
        this.isVerifyDialog = true
      } else {
        this.$router.push('/personal/closeMobileVerify')
      }
    },
    closeDialog (e) {
      this.isVerifyDialog = false
    },
    openMobileVerify () {
      this.isVerifyDialog = false
      this.axios({
        url: this.$store.state.url.personal.open_mobile_verify,
        headers: {},
        params: {},
        method: 'post'
      }).then((data) => {
        if (data.code === '0') {
          this.$store.dispatch('getCommonUser_info')
          this.$store.dispatch('setTipState', this.$t('personal.text_5'))
        } else {
          this.$store.dispatch('setTipState', {text: data.msg, type: 'error'})
        }
      })
    },
    // 绑定邮箱
    bindEmail () {
      if (this.userinfo.googleStatus === 0 && this.userinfo.isOpenMobileCheck === 0) {
        this.isVerifyDialog = true
      } else {
        this.$router.push('/personal/bindEmail')
      }
    },
    // 关闭谷歌验证
    closeGoogleBind () {
      if (this.userinfo.isOpenMobileCheck === 0) {
        this.isVerifyDialog = true
      } else {
        this.$router.push('/personal/googleBind')
      }
    },
    // 修改登录密码
    revisePassword (type) {
      if (type === 'setExPassW') {
        this.$router.push('/personal/setExPassW')
        return false
      }
      if (this.userinfo.googleStatus === 0 && this.userinfo.isOpenMobileCheck === 0) {
        this.isVerifyDialog = true
      } else if (type === 'loginPassW') {
        this.$router.push('/personal/revisePassword')
      } else { // 这里是用于设置交易密码的时候提示必须开启手机验证
        this.$store.dispatch('setTipState', {text: this.$t('myAdd.securityCenter.openPhoneVerify'), type: 'error'})
      }
    },
    // 显示说明
    showStrengthInfo () {
      this.$refs.strengthInfo.style.display = 'block'
    },
    // 隐藏说明
    hideStrengthInfo () {
      this.$refs.strengthInfo.style.display = 'none'
    }
  }
}
</script>
